html,
body {
	position: relative;
	height: 100%;
}

body {
	background: #eee;
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size: 14px;
	color: #222;
	margin: 0;
	padding: 0;
	background-image: url(../img/bg.jpg);
	background-position: center; background-size: 100% 100%;
}
.music{ z-index: 999; position: fixed; top: 3%; left: 3%; width: 60px; height: 60px; background-size: 100% 100%; background-repeat: no-repeat; }
.music_play{ background-image: url(../img/music_ico_1.png); }
.music_stop{ background-image: url(../img/music_ico_0.png); }

div { position: absolute; }
#loading{ position: fixed; z-index: 100; padding-top: 45%; top: 0px; left: 0px; bottom: 0px; right: 0px; width: 100%; height: 100%; background-image: url(../img/loading.jpg); background-size: 100% 100%; text-align:center;font-size:18px; }
@keyframes ld{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } }
@-webkit-keyframes ld{ from{ -webkit-transform: rotate(0deg); } to{ -webkit-transform: rotate(360deg); } }
/* #loading img{ animation: ld 2s linear infinite; -webkit-animation: ld 2s linear infinite; position: absolute;  width: 10%; top: 40%; left: 45%;  } */
#loading img{ position: absolute;  width: 20%; top: 30%; left: 40%;  }
#loading span{ position: absolute; display: inline-block; width: 100%; text-align: center; left: 0; top:43%; font-size: 2.5em; letter-spacing: 0.1em; font-weight: 600; color: #9C917C; }

#snow {
	display: none;
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: -1;
}

#snow .sn {
	background-position: top;
	background-size: 100% auto;
	display: none;
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}

@keyframes sn {
	0% {
		opacity: 0;
	}
	2% {
		opacity: 1;
	}
	23% {
		opacity: 1;
	}
	25% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

@-webkit-keyframes sn {
	0% {
		opacity: 0;
	}
	2% {
		opacity: 1;
	}
	23% {
		opacity: 1;
	}
	25% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

.snmv {
	animation: sn 4s linear infinite;
	-webkit-animation: sn 4s linear infinite;
	display: block !important;
}

#snow .sn1 {
	background-image: url(../img/snow_1.png);
}

#snow .sn2 {
	background-image: url(../img/snow_2.png);
}

#snow .sn3 {
	background-image: url(../img/snow_3.png);
}

#snow .sn4 {
	background-image: url(../img/snow_4.png);
}

.p5_mv {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
}

.p5_mv .p5mv {
	transform-origin: 50% 0%;
}

@-webkit-keyframes p5mv {
	0% {
		-webkit-transform: rotate(-20deg);
	}
	50% {
		-webkit-transform: rotate(20deg);
	}
	100% {
		-webkit-transform: rotate(-20deg);
	}
}

@keyframes p5mv {
	0% {
		transform: rotate(-20deg);
	}
	50% {
		transform: rotate(20deg);
	}
	100% {
		transform: rotate(-20deg);
	}
}

.mv {
	animation: p5mv 5s infinite;
	-webkit-animation: p5mv 5s infinite;
}

.p5_mv .p5mv_1 {
	background-image: url(../img/p5_ico1.png);
	width: 124px;
	height: 240px;
	left: 70%;
	top: 0%;
}

.p5_mv .p5mv_2 {
	background-image: url(../img/p5_ico2.png);
	width: 90px;
	height: 190px;
	left: 40%;
	top: 0%;
}

.p5_mv .p5mv_3 {
	background-image: url(../img/p5_ico3.png);
	width: 110px;
	height: 250px;
	left: -5%;
	top: 20%;
}

.p5_mv .p5mv_4 {
	background-image: url(../img/p5_ico4.png);
	width: 50px;
	height: 130px;
	left: 10%;
	top: 0%;
}

.page_view {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 90;
	overflow: hidden;
}

.card {
	position: absolute;
	background-image: url(../img/card.jpg);
	background-repeat: no-repeat;
	-webkit-transform: rotate(-9.5deg) scale(0.6);
	width: 100%;
	height: 60%;
	left: -3%;
	top: 18%;
}

@keyframes cardmv {
	0% {
		transform: rotate(-9.5deg) scale(0.6);
		width: 100%;
		height: 60%;
		left: -3%;
		top: 18%;
	}
	40% {
		transform: rotate(-8deg) scale(0.6);
		width: 100%;
		height: 100%;
		left: -12%;
		top: -40%;
	}
	100% {
		transform: rotate(0deg) scale(1);
		width: 100%;
		height: 100%;
		left: 0px;
		top: 0px;
	}
}

@-webkit-keyframes cardmv {
	0% {
		-webkit-transform: rotate(-9.5deg) scale(0.6);
		width: 100%;
		height: 60%;
		left: -3%;
		top: 18%;
	}
	40% {
		-webkit-transform: rotate(-8deg) scale(0.6);
		width: 100%;
		height: 100%;
		left: -12%;
		top: -40%;
	}
	100% {
		-webkit-transform: rotate(0deg) scale(1);
		width: 100%;
		height: 100%;
		left: 0px;
		top: 0px;
	}
}

.card.mv {
	animation: cardmv 2s both;
	-webkit-animation: cardmv 2s both;
}

.box_back,
.box_front {
	width: 100%;
	height: 460px;
	top: 30%;
	left: 0%;
	position: absolute;
}

.box_back {
	background-image: url(../img/card_back.png);
}

.box_front {
	background-image: url(../img/card_front.png);
}

@keyframes pt5mv {
	0% {
		bottom: -50%;
	}
	100% {
		bottom: 0%;
	}
}

@-webkit-keyframes pt5mv {
	0% {
		bottom: -50%;
	}
	100% {
		bottom: 0%;
	}
}

.p5_txt_2 {
	background-image: url(../img/p5_txt_2.png);
	bottom: -50%;
	height: 184px;
	width: 100%;
}

@keyframes  xf_zi{ from{ bottom: -50%; } to{ bottom: 10%;} }
@-webkit-keyframes  xf_zi{ from{ bottom: -50%; } to{ bottom: 10%;} }
.xf_zi_mv{ animation: xf_zi 1.2s linear both; -webkit-animation: xf_zi 1.2s linear both; }
.xf_zi{
	background-image: url(../img/card_txt.png); height: 196px; width: 100%; bottom: -50%;
}

.p5_txt_2.mv {
	animation: pt5mv .5s both;
	-webkit-animation: pt5mv .5s both;
}

.hz {    
	width: 300px;
    height: 280px;
	position: relative;
	top: 7%;
	left: 25%;
	z-index: 3;
}

.hz .hz_body,
.hz .hz_head {
	width: 100%;
	height: 100%;
	background-size: 100% 100%;
}

.hz .hz_body {
	background-image: url(../img/hz_body.png);
}

@keyframes hz_head {
	0% {
		transform: rotate(10deg);
	}
	5% {
		transform: rotate(-10deg);
	}
	45% {
		transform: rotate(-10deg);
	}
	50% {
		transform: rotate(10deg);
	}
	55% {
		transform: rotate(-10deg);
	}
	95% {
		transform: rotate(-10deg);
	}
	100% {
		transform: rotate(10deg);
	}
}

@-webkit-keyframes hz_head {
	0% {
		-webkit-transform: rotate(10deg);
	}
	5% {
		-webkit-transform: rotate(-10deg);
	}
	45% {
		-webkit-transform: rotate(-10deg);
	}
	50% {
		-webkit-transform: rotate(10deg);
	}
	55% {
		-webkit-transform: rotate(-10deg);
	}
	95% {
		-webkit-transform: rotate(-10deg);
	}
	100% {
		-webkit-transform: rotate(10deg);
	}
}

.hz .hz_head {
	background-image: url(../img/hz_head.png);
	animation: hz_head 4s infinite;
	animation: hz_head 4s infinite
}

.p5_bg {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-image: url(../img/p5_bg_1.jpg);
	background-position: top;
	background-size: cover;
}

.p5_bg_2 {
	width: 100%;
	height: 313px;
	bottom: 0;
	left: 0;
	background-image: url(../img/p5_bg_2.png);
	background-position: bottom;
	background-repeat: no-repeat;
}

.p5_tree {
	width: 486px;
	height: 648px;
	background-image: url(../img/p5_tree.png);
	top: 23%;
	left: 2%;
}
.p5_tree img{ width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; display: none; }
.p5_tree_1{ 
	background-image: url(../img/p5_tree_1.png); 
}
.p5_tree_2{ 
	background-image: url(../img/p5_tree_2.png); 
}
.p5_tree_3{ 
	background-image: url(../img/p5_tree_3.png); 
}

@-webkit-keyframes star {
	0% {
		-webkit-transform: scale(0.5);
	}
	48% {
		-webkit-transform: scale(0.5);
	}
	50% {
		-webkit-transform: scale(0.8);
	}
	98% {
		-webkit-transform: scale(0.8);
	}
	100% {
		-webkit-transform: scale(0.5);
	}
}

@keyframes star {
	0% {
		transform: scale(0.5);
	}
	48% {
		transform: scale(0.5);
	}
	50% {
		transform: scale(0.8);
	}
	98% {
		transform: scale(0.8);
	}
	100% {
		transform: scale(0.5);
	}
}

.p5_star {
	animation: star 1s infinite;
	-webkit-animation: star 1s infinite;
	opacity: 0.4;
	background-image: url(../img/p5_start.png);
	width: 286px;
	height: 146px;
	top: 18%;
	left: 18%;
}

.p5_txt {
	background-image: url(../img/p5_txt_1.png);
	width: 311px;
	height: 429px;
	top: 2%;
	right: 2%;
}

.p5_mv {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.p5_mv .p5mv {
	background-position: bottom;
	background-repeat: no-repeat;
}

@-webkit-keyframes p5mv {
	0% {
		-webkit-transform: rotate(-20deg);
	}
	50% {
		-webkit-transform: rotate(20deg);
	}
	100% {
		-webkit-transform: rotate(-20deg);
	}
}

@keyframes p5mv {
	0% {
		transform: rotate(-20deg);
	}
	50% {
		transform: rotate(20deg);
	}
	100% {
		transform: rotate(-20deg);
	}
}

.mv {
	animation: p5mv 5s infinite;
	-webkit-animation: p5mv 5s infinite;
}

.p5_mv .p5mv_1 {
	background-image: url(../img/p5_ico1.png);
	width: 124px;
	height: 480px;
	left: 70%;
	top: -25%;
}

.p5_mv .p5mv_2 {
	background-image: url(../img/p5_ico2.png);
	width: 90px;
	height: 380px;
	left: 40%;
	top: -20%;
}

.p5_mv .p5mv_3 {
	background-image: url(../img/p5_ico3.png);
	width: 110px;
	height: 500px;
	left: -5%;
	top: -23%;
}

.p5_mv .p5mv_4 {
	background-image: url(../img/p5_ico4.png);
	width: 50px;
	height: 260px;
	left: 10%;
	top: -15%;
}

.p5_btnbox {
	bottom: 20px;
	height: 72px;
	width: 100%;
	left: 0px;
}

.p5_btnbox .p5_btn {
	background-image: url(../img/s_btn.png);
	width: 301px;
	left: 27%;
	height: 100%;
}

.page_set {
	width: 100%;
	height: 100%;
	z-index: 9;
	opacity: 0;
}

.listionBtn {
	background-image: url(../img/share_btn_1.png);
	width: 490px;
	height: 100px;
	position: absolute;
	bottom: 20px;
	left: 75px;
}

.play_btn {
	background-image: url(../img/play_btn.png);
	width: 103px;
	height: 103px;
	top: 52%;
	left: 32%;
	display: none;
}

.play_txt {
	background-image: url(../img/play_txt.png);
	width: 155px;
	height: 32px;
	top: 64%;
	left: 27%;
}

.xinfeng{
	width: 100%;
	height:428px;
	background-image: url(../img/xinfeng_hs.png);
	    top: 27%;
	    left: 0px;
}

@keyframes xfmv{
	0%{transform: rotate(0deg) scale(1); opacity: 1;}
	75%{transform: rotate(270deg) scale(3); opacity: 1;}
	100%{transform: rotate(360deg) scale(4); opacity: 0;}
}
@-webkit-keyframes xfmv{
	0%{-webkit-transform: rotate(0deg) scale(1); opacity: 1;}
	75%{-webkit-transform: rotate(270deg) scale(3); opacity: 1;}
	100%{-webkit-transform: rotate(360deg) scale(4); opacity: 0;}
}

.xfmv{ animation: xfmv 1s linear both; -webkit-animation: xfmv 1s linear both; }
